@import "./styles/icon.wxss";
page,view,text,swiper,swiper-item,image,navigator{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/*定义颜色变量和大小变量*/
page{
  --themeColor:#01B0F1;
  font-size:32rpx;
}
//横线
.line{
  width: 100%;
  margin: 10px auto;
  border-top:1px black solid;
}
.search_row{
  margin-top: 0rpx;
  padding-top: 0;
  padding-left: 15rpx;
  padding-right: 15rpx;

  background-color: white;
  z-index: 100;

  width: 100%;
  height: 78rpx;

  position: fixed;

  display: flex;
  justify-content: space-around;
  align-items: center;
  input{
    width: 500rpx;
    height: 50rpx;
    padding-left: 20rpx;//调整字体向右偏移
    margin-right: 10rpx;

    background-color: white;
    border: #01B0F1 2px solid;
    border-radius: 20rpx;

  }
  //删除小图标
  .cleanIcon{
    position: absolute;
    right: 225rpx;
    height: 50rpx;
    width: 50rpx;

    display: flex;
    justify-content: center;
    align-items: center;

    /*
        一个极小的细节(指卡了两个小时)
        1.什么是z-index？
          z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
          不会影响子向父事件冒泡
          周神：但是可以影响兄弟元素的事件顺序★★★
        2.此处作用：优先触发cleanIcon而非input的点击事件，否则cleanIcon永远别想被点击了
     */
    z-index: 101;
    image{
      width: 70%;
    }
  }
  button{
    width: 10rpx;
    height: 57rpx;
    padding: 0;
    margin-right: 20rpx!important;

    background-image: linear-gradient(to right, #89f7fe , #66a6ff);
    border-radius: 30rpx;

    font-size: 29rpx;
    color: white;
    //让button中的文字水平、垂直都居中，有哪几种方法？

    //法一
    display: flex;
    justify-content: center;
    align-items: center;

    //法二
    //text-align: center;//水平
    //line-height: 54rpx;

    image{
      width: 30%;
    }
  }
}
.search_content{
  .search_item{
    background-color: white;

    font-size: 28rpx;
    padding: 15rpx 10rpx;
    border-bottom: 1rpx solid #ccc;

    overflow: hidden;
    white-space: nowrap;//规定段落中的文本不进行换行
    text-overflow: ellipsis;//显示省略符号来代表被修剪的文本
  }
}
//所有页面都得有个内边距
.container{
  width: 100%;
  margin-bottom: 100rpx;
  padding: 0rpx 10rpx 10rpx;

  background-color: white;

  box-sizing: border-box;
  overflow: hidden;
}
//数据展示
.dataDisplay{
  margin-bottom: 30rpx;
}
//确认按钮
.confirmBtn{
  width: 260rpx!important;

  text-align: center;
  border-radius: 30rpx;
  margin-bottom: 30rpx;
  background-image: linear-gradient(to right, #89f7fe , #66a6ff);
  color: white;
}
//选照片按钮
.photoBtn{
  width: 260rpx!important;

  text-align: center;
  border-radius: 30rpx;
  margin-bottom: 30rpx;
  background-image: linear-gradient(to right, #a8edea , #fed6e3);
  color: white;
}
//展示按钮
.normalBtn{
  width: 260rpx!important;

  text-align: center;
  border-radius: 30rpx;
  margin-bottom: 30rpx;
  background-color: #777777;
  color: white;
}

//输入框
.inputCt{
  margin-bottom: 30rpx;
  width: 100%;
  display: flex;
  align-items: center;
  input{
    display: inline-block;
    width: 50%;
    padding-left: 20rpx;

    border: #01B0F1 2px solid;
    border-radius: 20px;

  }
}
//注意事项
.notice{
  display: block;
  margin-top: 300rpx;
}

.block-img{
  margin-top: 30rpx;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  //图片
  .pic {
    float:left;
    position:relative;
  }
}
